<template>
  <el-dialog
    :append-to-body="true"
    :visible.sync="dialog"
    title="添加地址"
    width="600px"
    align="left">
    <el-form
      ref="form"
      :model="form"
      size="small"
      label-width="80px">
      <el-form ref="form" :model="form" size="small" label-width="80px">
        <el-form-item label="联系人">
          <el-input v-model="form.contacts" style="width: 350px;" />
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="form.tel" style="width: 350px;"/>
        </el-form-item>
        <el-form-item label="座机">
          <el-input v-model="form.landline_telephone" style="width: 350px;"/>
        </el-form-item>
        <el-form-item label="联系地址">
          <el-select
            v-model="sheng"
            style="width: 100px"
            placeholder="省"
            @change="choseProvince">
            <el-option
              v-for="item in province"
              :key="item.id"
              :label="item.value"
              :value="item.id"/>
          </el-select>
          <el-select
            v-model="shi"
            style="width: 100px"
            placeholder="市">
            <el-option
              v-for="item in shi1"
              :key="item.id"
              :label="item.value"
              :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="form.street" style="width: 350px;"/>
        </el-form-item>
        <el-form-item label="地址类型">
          <el-radio-group v-model="form.type" size="small">
            <el-radio label="1">退货地址</el-radio>
            <el-radio label="0">收货地址</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer">
      <el-button
        type="text"
        @click="cancel">取消</el-button>
      <el-button
        :loading="loading"
        type="primary"
        @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { updateAddress } from '@/api/mall/shopconfigRequest'
export default {
  components: { Treeselect },
  props: {
  },
  data() {
    return {
      loading: false, dialog: false,
      form: {
        number: '',
        contacts: '',
        landline_telephone: '',
        province: '',
        city: '',
        street: '',
        type: '1',
        tel: ''
        // company_id: this.$store.state.user.user.companyId
      },
      mapJson: '../../static/json/map.json',
      province: '',
      sheng: '',
      shi: '',
      shi1: [],
      qu: '',
      qu1: [],
      city: ''
    }
  },
  created: function() {

  },
  methods: {
    cancel() {
      this.resetForm()
    },
    // 选省
    choseProvince: function(e) {
      for (var index2 in this.province) {
        if (e === this.province[index2].id) {
          this.shi1 = this.province[index2].children
          this.shi = this.province[index2].children[0].value
          this.qu1 = this.province[index2].children[0].children
          this.qu = this.province[index2].children[0].children[0].value
          this.E = this.qu1[0].id
        }
      }
    },
    doSubmit() {
      this.$refs['form'].validate((valid) => {
        this.doAdd()
      })
    },
    doAdd() {
      const reg = /^1(3|4|5|7|8)\d{9}$/
      const reg1 = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/
      // 市判断，因为前面写的获取市的方法不知道怎么写的，
      // 所以导致，时而获取id，时而获取的是名字，这里默认直接覆盖，当id匹配时，用id里的内容
      this.form.city = this.shi
      this.shi1.map(item => {
        if (item.id === this.shi) {
          this.form.city = item.value
        }
      })
      // 省，传递的省一直是id，所以需要遍历匹配
      this.province.map(item => {
        if (item.id === this.sheng) {
          this.form.province = item.value
        }
      })
      if (!reg.test(this.form.tel)) {
        this.$notify({
          title: '请输入正确的手机号',
          type: 'warning',
          duration: 2500
        })
        return
      }
      if (this.form.contacts === '' || this.form.landline_telephone === '' || this.form.province === '' ||
        this.form.city === '' || this.form.street === '' || this.form.type === '') {
        this.$notify({
          title: '有未输入项',
          type: 'warning',
          duration: 2500
        })
        return
      }
      if (!reg1.test(this.form.landline_telephone)) {
        this.$notify({
          title: '请输入正确的座机',
          type: 'warning',
          duration: 2500
        })
        return
      }
      updateAddress(this.form).then(res => {
        this.resetForm()
        if (res) {
          this.$notify({
            title: '添加成功',
            type: 'success',
            duration: 2500
          })
          this.dialog = false
          this.$parent.address = []
          this.$parent.getMallList()
        } else {
          this.$notify({
            title: '添加失败',
            type: 'error',
            duration: 2500
          })
          this.$parent.loading1 = false
          this.dialog = false
        }
      })
    },
    resetForm() {
      this.dialog = false
      this.form = {
        number: '',
        contacts: '',
        landline_telephone: '',
        province: '',
        city: '',
        street: '',
        type: '',
        tel: ''
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
/deep/ .el-input-number .el-input__inner {
  text-align: left;
}
</style>
